<template>
  <div class="detail">
    <!-- 头部 -->
    <div class="header">
      <router-link to="/home">
        <van-icon name="wap-home-o" size="30" />
      </router-link>
      <div class="headerTitle">网易严选</div>
      <div>
        <router-link to="/search">
          <van-icon name="search" size="30" class="search" />
        </router-link>
        <router-link to="/cart">
          <van-icon name="shopping-cart-o" size="30" />
        </router-link>
      </div>
    </div>
    <!-- images -->
    <van-swipe class="my-swipe" autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(skuImg, index) in skuImageList" :key="skuImg.id">
        <van-image
          width="375px"
          height="375px"
          fit="cover"
          :src="skuImg.imgUrl"
        />
      </van-swipe-item>
    </van-swipe>

    <!-- 价格区域 -->
    <div class="priceView">
      <div class="priceLeft">
        <div class="leftUp">
          <span>限时优惠</span>
          <span>|</span>
          <div class="countDown">
            <span>距结束</span>
            <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
          </div>
        </div>
        <div class="leftDown">
          <span>￥</span>
          <div class="nowPrice">{{ skuInfo.price }}</div>
          <div class="handPrice">到手价￥{{ skuInfo.price - 100 }}</div>
        </div>
      </div>
      <div class="priceRight">
        <img
          class="img"
          src="https://yanxuan.nosdn.127.net/static-union/16408357381db06a.png"
          alt=""
        />
      </div>
    </div>
    <!-- 商品名称区域 -->
    <div class="shopTitle">
      <div class="titelText">{{ skuInfo.skuDesc }}</div>
      <div class="titleRight">
        <div class="left">
          <div class="num">99.5%</div>
          <div class="text">好评率</div>
        </div>
        <div class="right">
          <van-icon name="arrow" size="20" color="#7F7F7F" />
        </div>
      </div>
    </div>
    <!--  自营严选 -->
    <div class="iconView">
      <div class="redMinBox">自营</div>
      <van-icon name="aim" size="18" color="#D9B383" />
      <span class="iconViewText">网易严选</span>
    </div>

    <!-- 分界线 -->
    <div class="br"></div>

    <!-- 邮费 -->
    <van-cell is-link title="邮费:满99元免邮" @click="showA = true" />
    <van-action-sheet v-model="showA" title="邮费">
      <div class="content">
        满99元免邮
        <div class="ruleContent">
          本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
        </div>
      </div>
    </van-action-sheet>
    <!-- 促销 -->
    <van-cell is-link title="促销：超值换购" @click="showB = true" />
    <van-action-sheet v-model="showB" title="促销">
      <div class="content">
        促销
        <div class="ruleContent">待开发</div>
      </div>
    </van-action-sheet>
    <!-- 购物返 -->
    <van-cell is-link title="购物返:最高返19积分" @click="showC = true" />
    <van-action-sheet v-model="showC" title="什么是购物返">
      <div class="content">
        关于购物返回馈金：
        <div class="ruleContent">
          1. 回馈金是严选用以回馈用户的代币<br />
          2. 回馈金可与现金1:1抵扣使用<br />
          3. 回馈金使用无门槛，可叠加<br />
          4. 购物即可返还回馈金，用户等级越高，返还比例越高<br />
          5. 本月获取的回馈金，统一在次月25日23:59:59失效，请尽快使用<br />
          6. 可在个人中心--回馈金中查看回馈金资产<br />
          7. 部分特殊商品和订单不支持返还回馈金，具体以回馈金的活动说明为准<br />
          8. 如有疑问，请联系严选在线客服<br />
        </div>
      </div>
    </van-action-sheet>

    <!-- 分界线 -->
    <div class="br"></div>

    <!-- 请选择规格数量 -->
    <van-cell is-link title="请选择规格数量" @click="show = true" />
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
    <!--配送 配送地址  -->
    <van-cell is-link title="配送：请选择配送地址" @click="showD = true" />
    <van-action-sheet v-model="showD" title="配送至">
      <div class="content">
        配送
        <div class="ruleContent">
          <van-field
            v-model="fieldValue"
            is-link
            readonly
            label="地区"
            placeholder="请选择所在地区"
            @click="showD = true"
          />
          <van-popup v-model="showD" round position="bottom">
            <van-cascader
              v-model="cascaderValue"
              title="请选择所在地区"
              :options="options"
              @close="showD = false"
              @finish="onFinish"
            />
          </van-popup>
        </div>
      </div>
    </van-action-sheet>

    <!-- 服务：严选自营 -->
    <van-cell is-link title="服务：严选自营" @click="showE = true" />
    <van-action-sheet v-model="showE" title="服务">
      <div class="content">
        严选自营
        <div class="ruleContent">商品均为网易严选自营，品质保证</div>
      </div>
      <div class="content">
        7天无忧退换
        <div class="ruleContent">
          顾客在收货之日起7天内保证商品完好、附件齐全的情况下，可发起无忧退换货，具体规则请参见帮助中心-退换货政策
        </div>
      </div>
      <div class="content">
        国内部分地区不可配送<br />
        城市：咸阳市、西安市
        <div class="ruleContent">
          区县：天津市津南区、天津市南开区、天津市西青区、天津市东丽区、深圳市罗湖区、周口市鹿邑县、周口市淮阳县、洛阳市新安县、信阳市新县、许昌市襄城县、许昌市长葛市、许昌市禹州市、鹤壁市淇滨区、鹤壁市淇县、鹤壁市浚县、鹤壁市山城区、商丘市宁陵县、德宏傣族景颇族自治州瑞丽市、德宏傣族景颇族自治州芒市、德宏傣族景颇族自治州盈江县、吐鲁番市鄯善县、商洛市商州区、商洛市洛南县、商洛市丹凤县、商洛市镇安县、晋城市城区、阿拉善盟额济纳旗、阿拉善盟阿拉善左旗、双鸭山市饶河县
        </div>
      </div>
    </van-action-sheet>

    <!-- 分界线 -->
    <div class="br"></div>

    <!-- 详情图片 -->
    <van-image
      width="375px"
      height="375px"
      fit="cover"
      :src="skuImg.imgUrl"
      v-for="(skuImg, index) in skuImageList"
      :key="skuImg.id"
    />
    <!-- 占位 -->
    <div class="box"></div>
    <!-- 底部 -->
    <div class="footer">
      <div class="footerContainer">
        <div class="serviceIcon">
          <van-icon name="service-o" size="30" color="#727272" />
        </div>
        <div class="btn">
          <button class="default">立即购买</button>
          <button class="danger" @click="addSku2Cart">加入购物车</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
export default {
  name: 'Detail',
  data() {
    return {
      // 倒计时
      time: 60 * 60 * 60 * 1000,
      show: false,
      showA: false,
      showB: false,
      showC: false,
      showD: false,
      showE: false,
      count: 1,
      // 这里点击的时候，要传递一个随机数id 可以出现不同得详情数据
      id: parseInt(Math.random() * 20, 10) + 1,
      goods: {
        // 默认商品 sku 缩略图
        picture: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      },
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '颜色', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '1', // skuValueId：规格值 id
                name: '红色', // skuValueName：规格值名称
                // imgUrl: 'https://img01.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                // previewImgUrl: 'https://img01.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
              },
              {
                id: '1',
                name: '蓝色',
                // imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                // previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg',
              },
            ],
            largeImageMode: false, //  是否展示大图模式
          },
          {
            k: '尺寸', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '1', // skuValueId：规格值 id
                name: '1.2米床三件套：适用1.5宽被芯', // skuValueName：规格值名称
                // imgUrl: 'https://img01.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                // previewImgUrl: 'https://img01.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
              },
              {
                id: '1',
                name: '1.2米床三件套：适用1.5宽被芯',
                // imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                // previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg',
              },
            ],
            largeImageMode: false, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
            s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110,
          },
        ],
      },

      // 地区
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }],
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }],
        },
      ],

      //
    };
  },
  methods: {
    onBuyClicked() {},
    onAddCartClicked() {},

    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map(option => option.text).join('/');
    },

    // 2. 跳转到添加购物车页面
    async addSku2Cart() {
      // console.log(1);
      // Vuex里面，此时暂时不需要存储数据，因此这个请求可以直接在这里去发
      // 不用再到Vuex中再去写三连环
      // 判断是否成功
      // 说明往服务器添加数据是成功的
      // 跳转之前，我们要把添加购物车成功页面所需要展示的数据给带过去
      // console.log(this.skuInfo)

      // 这里要判断cartList里面id是否存在，如果存在 直接加1，不存在再push
      let obj = this.cartList.find(item => item.id === this.id);
      if (obj) {
        this.count++;
      } else {
        this.count = 1;
      }
      await this.$store.dispatch('addOrUpdateShopCart', {
        skuId: this.id,
        skuNum: this.count,
      });
      this.$router.push({
        name: 'cart',
      });
    },
  },
  computed: {
    ...mapGetters('detail', [
      'categoryView',
      'skuInfo',
      'spuSaleAttrList',
      'skuImageList',
      'skuSaleAttrValueList',
    ]),
    ...mapState({
      cartList: state => state.cart.cartList,
    }),
  },
  mounted() {
    this.$store.dispatch('getShopCartList');
    // 发请求获取数据
    this.$store.dispatch('detail/getGoodDetailInfo', this.id);
  },
};
</script>

<style lang="less" scoped>
.detail {
  display: flex;
  flex-direction: column;
  // height: 2850px;
  // 头部
  .header {
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border: 1px solid #dee1e6;
    box-sizing: border-box;
    .headerTitle {
      font-size: 20px;
    }
    .search {
      padding: 0 10px;
    }
  }
  // 价格
  .priceView {
    display: flex;
    align-items: center;
    width: 357px;
    height: 82px;
    background-color: #fa1e32;
    padding: 0 0 0 17px;
    .priceLeft {
      display: flex;
      flex-direction: column;
      width: 280px;
      height: 72px;
      margin: 10px 0 0 0;
      .leftUp {
        display: flex;
        align-items: center;
        width: 270px;
        height: 22px;
        color: #fff;
        padding-left: 5px;
        span {
          display: inline-block;
          font-size: 12px;
          line-height: 22px;
          margin-right: 5px;
        }
        .countDown {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #fff;
          .van-count-down {
            color: #fff;
          }
        }
      }
      .leftDown {
        display: flex;
        align-items: center;
        width: 280px;
        height: 50px;
        span {
          font-size: 20px;
          color: white;
        }
        .nowPrice {
          font-size: 30px;
          line-height: 50px;
          margin-right: 5px;
          color: white;
        }
        .handPrice {
          width: 90px;
          height: 25px;
          font-size: 14px;
          text-align: center;
          line-height: 25px;
          background-color: white;
          border-radius: 15px;
          color: red;
          font-weight: 600;
        }
      }
    }
    .priceRight {
      .img {
        width: 75px;
        height: 44px;
      }
    }
  }
  // 商品名称区域
  .shopTitle {
    display: flex;
    width: 355px;
    height: 52px;
    padding: 10px;
    .titelText {
      width: 260px;
      font-size: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /** 多行文本溢出...*/
      overflow: hidden;
    }
    .titleRight {
      width: 95px;
      height: 52px;
      display: flex;
      flex-direction: row;
      .left {
        width: 65px;
        height: 52px;
        display: flex;
        flex-direction: column;
        .num {
          width: 65px;
          height: 26px;
          padding-left: 10px;
          font-size: 16px;
          color: red;
          line-height: 26px;
          text-align: center;
        }
        .text {
          width: 65px;
          height: 26px;
          padding-left: 10px;
          font-size: 12px;
          color: #7f7f7f;
          line-height: 26px;
          text-align: center;
        }
      }
      .right {
      }
    }
  }
  // 自营严选
  .iconView {
    display: flex;
    align-items: center;
    width: 355px;
    height: 22px;
    padding: 0 10px 0 10px;
    .redMinBox {
      width: 35px;
      height: 18px;
      font-size: 8px;
      color: white;
      background-color: red;
      line-height: 18px;
      text-align: center;
      border-radius: 10px;
      margin: 0 5px 0 0;
    }
    .iconViewText {
      width: 60px;
      height: 22px;
      display: inline-block;
      margin: 0 5px 0 5px;
      font-size: 10px;
      line-height: 22px;
      color: #7f7f7f;
    }
  }
  //促销。。。
  .content {
    padding: 16px 16px 20px;
    font-size: 16px;
  }
  .ruleContent {
    padding: 5px 0 0 0;
    font-size: 12px;
  }
  // 分界线
  .br {
    width: 375px;
    height: 5px;
    background-color: rgba(189, 182, 182, 0.363);
  }
  .box {
    width: 375px;
    height: 50px;
    background-color: #ffffff;
  }
  .footer {
    display: flex;
    width: 375px;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #a39f9f;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 99;
    .footerContainer {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 375px;
      height: 50px;
      .serviceIcon {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        width: 75px;
      }
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        width: 300px;
        font-size: 16px;
        .default {
          height: 50px;
          width: 150px;
          border: 0;
          color: black;
          border-right: 1px solid #a39f9f;
          border-left: 1px solid #a39f9f;
          background-color: #fff;
          box-sizing: border-box;
        }
        .danger {
          height: 50px;
          width: 150px;
          background-color: red;
          color: #fff;
          border: 0;
        }
      }
    }
  }
}
</style>
